<script lang="ts" setup>
import { useAppStore } from '@/store/modules/app';
import { useRoute, useRouter } from 'vue-router';
import { renderDropdownLabel, renderDropdownIcon } from '@/helper/breadcrumb';
import { usePermissionStore } from '@/store/modules/permission';
import { useDialog } from 'naive-ui';
import { userModel } from '@/api/system/user';

const appStore = useAppStore();
const route = useRoute();
const permissionStore = usePermissionStore();
const dialog = useDialog();
const router = useRouter();
const logout = () => {
  dialog.warning({
    title: '注销',
    content: '是否确认注销？',
    positiveText: '确认',
    negativeText: '取消',
    onPositiveClick: async () => {
      await userModel.logout();
      permissionStore.clearPermissin();
      document.cookie = '';
      router.push({ path: '/login' });
    }
  });
};

</script>
<template>
  <div
    class="fixed top-0 h-header right-0 transition-all duration-300 flex justify-between shadow-sm"
    :class="[appStore.collapsed ? 'left-sidebar--collapsed' : 'left-sidebar']"
  >
    <div class="h-full w-full flex items-center">
      <div
        class="h-full flex items-center px-small hover:bg-gray-200 hover:text-primary"
        @click="appStore.toggleCollapsed"
      >
        <Icon
          size="20"
          :name=" appStore.collapsed ? 'open' : 'close' "
        />
      </div>
      <div class="flex-1">
        <NBreadcrumb>
          <NBreadcrumbItem
            v-for="item in route.matched"
            :key="item.name"
          >
            <NDropdown
              :options="(item.children as any)"
              label-field="name"
              key-field="name"
              placement="bottom-start"
              :render-label="(route: any) => renderDropdownLabel(route)"
              :render-icon="(route: any) => renderDropdownIcon(route)"
            >
              <span>
                <NIcon
                  size="16"
                  class="mr-[8px]"
                >
                  <Icon :name="item.meta?.icon" />
                </NIcon> {{ item.meta.title }}
              </span>
            </NDropdown>
          </NBreadcrumbItem>
        </NBreadcrumb>
      </div>
      <div class="pr-normal flex justify-center gap-8px items-center">
        <img
        class="w-36px h-35px rounded-50%"
        :src="permissionStore.userInfo?.avatar"
        >
        {{ permissionStore.userInfo.nickname }}
        <NButton type="warning" text @click="logout">注销</NButton>
      </div>
    </div>
  </div>
</template>
